<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <i class="el-icon-food" style="color: #ffcc00;font-size: 20px"></i>
      <span style="font-size: 20px">饮食</span>
      <a style="color: darkgrey;font-size: 13px">food and drink</a>
      <el-button style="float: right; padding: 3px 0;color: #ffcc00" type="text">更多</el-button>
    </div>
    <div v-for="(item,index) in menus" :key="index" class="text item">
      <a :href='item.url' style="text-decoration: none">
      <el-card shadow="hover" style="height: 100px;cursor:pointer;">
        <el-image :src='item.photo' style="width: 100px;height: 60px;border-radius: 5px;  box-shadow: 0px 0px 6px #888888;">
        <div slot="error" class="image-slot">
          <i class="el-icon-picture-outline"></i>
        </div>
        </el-image>
        <div class="foodtype"><h>{{item.name}}</h></div>
      </el-card>
      <br>
      </a>
    </div>
  </el-card>
</template>

<script>
export default {
  name: "showfood",
  data(){
    return {
      menus: [
        { url:"#",
          photo:require('@/assets/food1.png'),
          name:"谷薯芋、杂豆、主食",
        }, { url:"#",
          photo:require('@/assets/food2.png'),
          name:"蛋类、肉类及制品",
        },{ url:"#",
          photo:require('@/assets/food3.png'),
          name:"奶类及制品",
        },{ url:"#",
          photo:require('@/assets/food4.png'),
          name:"蔬果和菌藻",
        },{ url:"#",
          photo:require('@/assets/food5.png'),
          name:"坚果、大豆及制品",
        },{ url:"#",
          photo:require('@/assets/food6.png'),
          name:"饮料",
        }
      ],
    }
  },
}
</script>

<style scoped>
.foodtype{
  position: relative;
  top:-60px;
  right: -110px;
  width: 90px;
  color: rgb(63,115,222);
  font-weight: bolder;
}
</style>
